let header = `<header>
<!-- （1）快速导航栏 -->
<div class="shortcut">
  <div class="shortcut-content">
    <div class="welcome">
      品优购欢迎您！请
      <a href="./login.html">登录</a>
      <a href="./register.html">免费注册</a>
    </div>
    <ul class="order-center">
      <li><a href="./login.html">我的订单</a><span>|</span></li>
      <li><a href="./login.html">个人中心</a></li>
    </ul>
  </div>
</div>
<!-- （2）Logo区 -->
<div class="logo-area">
  <h1>
    <!-- （1）单双标签；(2）块级（独占一行，识别宽高）、行级（不独占一行，不识别宽高，
      但可以通过但可以通过display:block/inling-block将其转换为块级或行内块级，
      以识别宽高)、行内块级（不独占一行，但识别宽高
      如img\input\button\select\textarea等） -->
    <a href="../index.html">
      <img src="../images/logo.png" alt="" />
    </a>
    <!-- <br/>换行符
      <hr/> 分割线-->
  </h1>
  <div class="search">
    <!-- 单行文本框 -->
    <input type="text" placeholder="请输入内容...." />
    <!-- 普通命令按钮 -->
    <input type="button" value="搜索" />
  </div>
  <div class="cart">
    <i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag-heart" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5Zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0ZM14 14V5H2v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1ZM8 7.993c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132Z"/>
    </svg></i>
    <span><a href="./cart.html">我的购物车</a></span>
    <!-- 徽章 -->
    <span class="badge">0</span>
    <i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
      <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
    </svg></i>
  </div>
</div>
<div class="clear"></div>
<!-- （3）导航栏 -->
<nav>
  <div class="nav center">
    <div class="category fl">
      <div class="category-title " style="position:relative; z-index:9999;">全部商品分类</div>
      <ul class="category-nav-list">
        <!-- 手机 -->
        <li class="category-nav-item">
          <div class="category-name">
            <a href="./category.html" class="category-name-0">手机</a>
            <i class="iconfont icon-youjiantou"></i>
          </div>
          <ul class="category-subnav-list">
            <li>
              <a href="./pro-care.html"><img src="../images/m01.png" alt="商品">
                <span>HUAWEI P系列</span>
              </a>
            </li>
            <li>
              <a href="./pro-care.html"><img src="../images/m02.png" alt="商品">
                <span>HUAWEI Mate系列</span>
              </a>
            </li>
            <li>
              <a href="./pro-care.html"><img src="../images/m03.png" alt="商品">
                <span>HUAWEI Nova系列</span>
              </a>
            </li>
          </ul>
        </li>
        <!-- 笔记本 -->
         <li class="category-nav-item">
          <div class="category-name">
            <a href="./category.html"class="category-name-0">笔记本</a>
            <i class="iconfont icon-youjiantou"></i>
          </div>
          <ul class="category-subnav-list">
            <li>
              <a href="./pro-care.html"><img src="../images/l01.png" alt="商品">
                <span>华为MateBook X系列</span>
              </a>
            </li>
            <li>
              <a href="./pro-care.html"><img src="../images/l02.png" alt="商品">
                <span>华为MateBook系列 </span>
              </a>
            </li>
            <li>
              <a href="./pro-care.html"><img src="../images/l03.png" alt="商品">
                <span>华为MateBook D系列</span>
              </a>
            </li>
          </ul>
        </li> 
        <!-- 平板 -->
        <li class="category-nav-item">
          <div class="category-name">
            <a href="./category.html"class="category-name-0">平板</a>
            <i class="iconfont icon-youjiantou"></i>
          </div>
          <ul class="category-subnav-list">
            <li>
              <a href="./pro-care.html"><img src="../images/t01.png" alt="商品">
                <span>华为MatePad 系列</span>
              </a>
            </li>
            <li>
              <a href="./pro-care.html"><img src="../images/t02.png" alt="商品">
                <span>华为畅想系列</span>
              </a>
            </li>
          </ul>
        </li> 
        <!-- 智能穿戴 -->
        <li class="category-nav-item">
          <div class="category-name">
            <a href="./category.html"class="category-name-0">智能穿戴</a>
            <i class="iconfont icon-youjiantou"></i>
          </div>
          <ul class="category-subnav-list">
            <li>
              <a href="./pro-care.html"><img src="../images/w01.png" alt="商品">
                <span>智能手表</span>
              </a>
            </li>
            <li>
              <a href="./pro-care.html"><img src="../images/w02.png" alt="商品">
                <span>智能手环</span>
              </a>
            </li>
          </ul>
        </li> 
        <!-- 智能家居 -->
        <li class="category-nav-item">
          <div class="category-name">
            <a href="./category.html"class="category-name-0">智能家居</a>
            <i class="iconfont icon-youjiantou"></i>
          </div>
          <ul class="category-subnav-list">
            <li>
              <a href="./pro-care.html"><img src="../images/f01.png" alt="商品">
                <span>智能路由</span>
              </a>
            </li>
            <li>
              <a href="./pro-care.html"><img src="../images/f02.png" alt="商品">
                <span>智能音箱 </span>
              </a>
            </li>
          </ul>
        </li> 
        <!-- 电视 -->
        <li class="category-nav-item">
          <div class="category-name">
            <a href="./category.html"class="category-name-0">电视</a>
            <i class="iconfont icon-youjiantou"></i>
          </div>
          <ul class="category-subnav-list">
            <li>
              <a href="./pro-care.html"><img src="../images/d01.png" alt="商品">
                <span>华为智慧屏</span>
              </a>
            </li>
            <li>
              <a href="./pro-care.html"><img src="../images/d02.png" alt="商品">
                <span>荣耀智慧屏</span>
              </a>
          </li>
          </ul>
        </li>  
      </ul>
    </div>
    <ul class="main-nav fl">
      <li><a href="./category.html">手机</a></li>
      <li><a href="./category.html">笔记本</a></li>
      <li><a href="./category.html">平板</a></li>
      <li><a href="./category.html">智能穿戴</a></li>
      <li><a href="./category.html">智能家居</a></li>
      <li><a href="./category.html">电视</a></li>
    </ul>
  </div>
</nav>


</header>`;
//将header中的变量的内容输入到文档中
document.write(header);
